<!DOCTYPE html>
<html>
	<head>
		<title>Rich Text Editor</title>
		<style type="text/css">
			.intLink {
				cursor: pointer;
			}

			img.intLink {
				border: 0;
			}

			#toolBar1 {
				display: flex;
				align-items: center;
			}

			#toolBar1 select {
				font-size: 10px;
			}

			#textBox {
				width: 685px;
				min-height: 200px;
				border: 1px #000000 solid;
				padding: 12px;
				background: #ddd;
				/* overflow-y: scroll; */
			}

			#textBox #sourceText {
				padding: 0;
				margin: 0;
				min-width: 498px;
				min-height: 200px;
			}

			#editMode {
				display: none;
			}

			#editMode label {
				cursor: pointer;
			}
			.option {
				/*用div的样式代替select的样式*/
				width: 140px;
				height: 25px;
				/*border-radius: 5px;*/
				/*盒子阴影修饰作用,自己随意*/
				/* box-shadow: 0 0 5px #ccc;*/
				border: 1px solid #cccccc;
				position: relative;
			}
			.option select {
				/*清除select的边框样式*/
				border: none;
				/*清除select聚焦时候的边框颜色*/
				outline: none;
				/*将select的宽高等于div的宽高*/
				width: 100%;
				height: 25px;
				line-height: 25px;
				/*隐藏select的下拉图标*/
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				/*通过padding-left的值让文字居中*/
				padding-left: 20px;
			}
			/*使用伪类给select添加自己想用的图标*/
			.option:after {
				content: "";
				width: 14px;
				height: 8px;
				/* background: url(../assets/arrow-down.png) no-repeat center; */
				/*通过定位将图标放在合适的位置*/
				position: absolute;
				right: 20px;
				top: 41%;
				/*给自定义的图标实现点击下来功能*/
				pointer-events: none;
			}
		</style>
	</head>

	<body onload="initDoc();">
		<form name="compForm">
			<input type="hidden" name="myDoc" />
			<div id="toolBar1">
				<div class="option">
					<select
						onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"
					>
						<option selected>标签类型</option>
						<option value="h1">&lt;h1&gt;</option>
						<option value="h2">&lt;h2&gt;</option>
						<option value="h3">&lt;h3&gt;</option>
						<option value="h4">&lt;h4&gt;</option>
						<option value="h5">&lt;h5&gt;</option>
						<option value="h6">&lt;h6&gt;</option>
						<option value="p">&lt;p&gt;</option>
						<option value="pre">&lt;pre&gt;</option>
					</select>
				</div>
				<div class="option">
					<select
						onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"
					>
						<option class="heading" selected>字体名称</option>
						<option value="SimHei">黑体</option>
						<option value="SimSun">宋体</option>
						<option value="Arial">Arial</option>
						<option value="Arial Black">Arial Black</option>
						<option value="Courier New">Courier New</option>
						<option value="Times New Roman">Times New Roman</option>
					</select>
				</div>
				<div class="option">
					<select
						onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"
					>
						<option class="heading" selected>字号大小</option>
						<!-- <option value="1">Very small</option>
						<option value="2">A bit small</option> -->
						<option value="3">五号</option>
						<option value="4">四号</option>
						<option value="5">三号</option>
						<option value="6">二号</option>
						<option value="7">一号</option>
					</select>
				</div>
				<div class="option">
					<select
						onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"
					>
						<option class="heading" selected>颜色</option>
						<option value="#fff">白色</option>
						<option value="red">红色</option>
						<option value="blue">蓝色</option>
						<option value="green">绿色</option>
						<option value="black">黑色</option>
					</select>
				</div>
				<div class="option">
					<select
						onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"
					>
						<option class="heading" selected>背景色</option>
						<option value="#ddd">灰色</option>
						<option value="red">红色</option>
						<option value="green">绿色</option>
						<option value="black">黑色</option>
					</select>
				</div>
			</div>
			<div id="toolBar2">
				<img
					class="intLink"
					title="Bold"
					onclick="formatDoc('bold');"
					src=""
				/>
				<img
					class="intLink"
					title="Italic"
					onclick="formatDoc('italic');"
					src=""
				/>
				<img
					class="intLink"
					title="Underline"
					onclick="formatDoc('underline');"
					src=""
				/>
				<img
					class="intLink"
					title="Left align"
					onclick="formatDoc('justifyleft');"
					src=""
				/>
				<img
					class="intLink"
					title="Center align"
					onclick="formatDoc('justifycenter');"
					src=""
				/>
				<img
					class="intLink"
					title="Right align"
					onclick="formatDoc('justifyright');"
					src=""
				/>
				<img
					class="intLink"
					title="Numbered list"
					onclick="formatDoc('insertorderedlist');"
					src=""
				/>
				<img
					class="intLink"
					title="Dotted list"
					onclick="formatDoc('insertunorderedlist');"
					src=""
				/>
			</div>
			<div id="textBox" contenteditable="true">
				<p>Lorem ipsum</p>
			</div>
			<p id="editMode">
				<input
					type="checkbox"
					name="switchMode"
					id="switchBox"
					onchange="setDocMode(this.checked);"
				/>
				<label for="switchBox">Show HTML</label>
			</p>
		</form>

		<script type="text/javascript">
			var oDoc, sDefTxt;

			function initDoc() {
				oDoc = document.getElementById("textBox");
				sDefTxt = oDoc.innerHTML;
				if (document.compForm.switchMode.checked) {
					setDocMode(true);
				}
			}

			function formatDoc(sCmd, sValue) {
				if (validateMode()) {
					document.execCommand(sCmd, false, sValue);
					oDoc.focus();
				}
			}

			function validateMode() {
				if (!document.compForm.switchMode.checked) {
					return true;
				}
				alert('Uncheck "Show HTML".');
				oDoc.focus();
				return false;
			}

			function setDocMode(bToSource) {
				var oContent;
				if (bToSource) {
					oContent = document.createTextNode(oDoc.innerHTML);
					oDoc.innerHTML = "";
					var oPre = document.createElement("pre");
					oDoc.contentEditable = false;
					oPre.id = "sourceText";
					oPre.contentEditable = true;
					oPre.appendChild(oContent);
					oDoc.appendChild(oPre);
				} else {
					if (document.all) {
						oDoc.innerHTML = oDoc.innerText;
					} else {
						oContent = document.createRange();
						oContent.selectNodeContents(oDoc.firstChild);
						oDoc.innerHTML = oContent.toString();
					}
					oDoc.contentEditable = true;
				}
				oDoc.focus();
			}

			function printDoc() {
				if (!validateMode()) {
					return;
				}
				var oPrntWin = window.open(
					"",
					"_blank",
					"width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"
				);
				oPrntWin.document.open();
				oPrntWin.document.write(
					'<!doctype html><html><head><title>Print<\/title><\/head><body onload="print();">' +
						oDoc.innerHTML +
						"<\/body><\/html>"
				);
				oPrntWin.document.close();
			}
		</script>
	</body>
</html>
<!--Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.-->
<!--The quick brown fox jumps over the lazy dog-->
